<template>
  <div id="operate_freight">
    <div id="system_admin">
      <!--顶部搜索框内容开始-->
      <div class="role_seek">
        <el-button size="mini" type="primary" icon="el-icon-search" @click="add"
        v-power="'operation:freight:create'"
          >添加</el-button
        >
        <!--修改添加弹出框开始-->
        <el-dialog
          :title="title"
          :visible.sync="dialogFormVisible"
          :fullscreen="true"
        >
          <el-form
            :model="form"
            :rules="rules"
            ref="form"
            class="pop-up pop_first"
            label-position="left"
            status-icon
          >
            <el-form-item
              clearable
              prop="templateName"
              label="模板名称"
              :label-width="formLabelWidth"
            >
              <el-input
                clearable
                v-model="form.templateName"
                autocomplete="off"
              ></el-input>
            </el-form-item>

            <el-form-item label="发货地址" :label-width="formLabelWidth">
              <el-input
                clearable
                v-model="form.spuLocation"
                autocomplete="off"
              ></el-input>
            </el-form-item>

            <el-form-item
              prop="deliveryDeadline"
              label="发货期限"
              :label-width="formLabelWidth"
            >
              <el-input
                clearable
                v-model.number="form.deliveryDeadline"
                autocomplete="off"
                class="input-with-select periodinput"
              >
                <el-button slot="append">天</el-button></el-input
              >
            </el-form-item>

            <el-form-item label="是否包邮" :label-width="formLabelWidth">
              <el-radio-group v-model="radio">
                <el-radio :label="0">坚决不包邮</el-radio>
                <el-radio :label="1">卖家承担包邮</el-radio>
                <el-radio :label="2">设定满额包邮</el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item
              prop="defaultFreePrice"
              label="默认包邮限额"
              :label-width="formLabelWidth"
              v-if="radio == 2"
            >
              <el-input
                v-model.number="form.defaultFreePrice"
                autocomplete="off"
                placeholder="默认包邮额度"
              >
                <el-button slot="append">元</el-button></el-input
              >
            </el-form-item>
            <el-form-item
              prop="defaultFirstNum"
              label="计费首次数量"
              :label-width="formLabelWidth"
              v-if="this.radio != 1"
            >
              <el-input
                clearable
                v-model.number="form.defaultFirstNum"
                autocomplete="off"
              >
                <el-button slot="append"
                  >件
                  <el-tooltip
                    class="item"
                    effect="dark"
                    content="当用户购买商品数量小于 ‘这个数’ 就支付默认首次发货价格的运费"
                    placement="top-start"
                  >
                    <i class="el-icon-question"></i> </el-tooltip></el-button
              ></el-input>
            </el-form-item>
            <el-form-item
              v-if="this.radio != 1"
              prop="defaultFirstMoney"
              label="计费首次价格"
              :label-width="formLabelWidth"
            >
              <el-input
                clearable
                v-model.number="form.defaultFirstMoney"
                autocomplete="off"
                ><el-button slot="append">元</el-button></el-input
              >
            </el-form-item>

            <el-form-item
              v-if="this.radio != 1"
              prop="defaultContinueNum"
              label="计费续件数量"
              :label-width="formLabelWidth"
            >
              <el-input
                clearable
                v-model.number="form.defaultContinueNum"
                autocomplete="off"
                ><el-button slot="append"
                  >件
                  <el-tooltip
                    class="item"
                    effect="dark"
                    content="当用户购买数量高于 ‘首次发货数量’ 每多 N 件，就须额外支付 ‘续件价格’"
                    placement="top-start"
                  >
                    <i class="el-icon-question"></i> </el-tooltip></el-button
              ></el-input>
            </el-form-item>
            <el-form-item
              v-if="this.radio != 1"
              prop="defaultContinueMoney"
              label="计费续件价格"
              :label-width="formLabelWidth"
            >
              <el-input
                clearable
                v-model.number="form.defaultContinueMoney"
                autocomplete="off"
                ><el-button slot="append"
                  >元
                  <el-tooltip
                    class="item"
                    effect="dark"
                    content="若不需要计件额外算运费，则直接填0即可"
                    placement="top-start"
                  >
                    <i class="el-icon-question"></i> </el-tooltip></el-button
              ></el-input>
            </el-form-item>
            <el-form-item label="指定地区价格" :label-width="formLabelWidth">
              <el-button size="small" type="primary" plain @click="priceAdd"
                >添加</el-button
              >
              <!--添加地区表格开始-->
              <el-table
                :data="form.freightTemplateCarriageDOList"
                style="width: 80%"
              >
                <el-table-column
                  align="center"
                  prop="id"
                  label="指定地区ID"
                  v-if="this.title == '编辑'"
                >
                </el-table-column>
                <el-table-column
                  align="center"
                  prop="designatedArea"
                  label="指定省份"
                  width="180"
                >
                </el-table-column>
                <el-table-column
                  align="center"
                  prop="firstNum"
                  label="首次数量"
                  width="180"
                >
                </el-table-column>
                <el-table-column
                  align="center"
                  prop="firstMoney"
                  label="首次价格"
                >
                </el-table-column>
                <el-table-column
                  align="center"
                  prop="continueNum"
                  label="续件数量"
                >
                </el-table-column>
                <el-table-column
                  align="center"
                  prop="continueMoney"
                  label="续件价格"
                >
                </el-table-column>
                <el-table-column
                  align="center"
                  prop="freePrice"
                  label="满额包邮门栏"
                >
                </el-table-column>
                <el-table-column align="center" prop="address" label="操作">
                  <template slot-scope="scope">
                    <el-button
                      class="button_remove"
                      size="mini"
                      type="danger"
                      @click="priceCancel(scope.index)"
                      >删除</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
              <!--添加地区表格结束-->
            </el-form-item>

            <!--价格添加弹出框开始-->
            <el-dialog
              title="添加指定地区"
              :visible.sync="priceFormVisible"
              :append-to-body="true"
              :modal="false"
            >
              <el-form
                :model="priceForm"
                :rules="rulesPrice"
                ref="priceForm"
                class="pop-up"
                status-icon
              >
                <el-form-item
                  label="包邮门栏"
                  :label-width="formLabelWidth"
                  prop="freePrice"
                >
                  <el-input
                    autocomplete="off"
                    v-model.number="priceForm.freePrice"
                    ><el-button slot="append">元</el-button></el-input
                  >
                </el-form-item>

                <el-form-item
                  label="首次数量"
                  :label-width="formLabelWidth"
                  prop="firstNum"
                >
                  <el-input
                    autocomplete="off"
                    v-model.number="priceForm.firstNum"
                    ><el-button slot="append">件</el-button></el-input
                  >
                </el-form-item>

                <el-form-item
                  label="首次价格"
                  :label-width="formLabelWidth"
                  prop="firstMoney"
                >
                  <el-input
                    autocomplete="off"
                    v-model.number="priceForm.firstMoney"
                    ><el-button slot="append">元</el-button></el-input
                  >
                </el-form-item>

                <el-form-item
                  label="续件数量"
                  :label-width="formLabelWidth"
                  prop="continueNum"
                >
                  <el-input
                    autocomplete="off"
                    v-model.number="priceForm.continueNum"
                    ><el-button slot="append">件</el-button></el-input
                  >
                </el-form-item>

                <el-form-item
                  label="续件价格"
                  :label-width="formLabelWidth"
                  prop="continueMoney"
                >
                  <el-input
                    autocomplete="off"
                    v-model.number="priceForm.continueMoney"
                    ><el-button slot="append">元</el-button></el-input
                  >
                </el-form-item>

                <el-form-item
                  label="指定地区"
                  prop="designatedArea"
                  :label-width="formLabelWidth"
                >
                  <el-checkbox-group
                    v-model="priceForm.designatedArea"
                    @change="handleCheckedCitiesChange"
                  >
                    <el-checkbox
                      v-for="item in designatedArea"
                      :key="item"
                      :label="item"
                    ></el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="priceFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="priceForms('priceForm')"
                  >确 定</el-button
                >
              </div>
            </el-dialog>
            <!--价格添加弹出框结束-->
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button
              type="primary"
              @click="bool ? adduser('form') : compile('form')"
              >确 定</el-button
            >
          </div>
        </el-dialog>
        <!--修改添加弹出框结束-->
      </div>
      <!--顶部搜索框内容结束-->

      <!--底部列表内容部分-->
      <template>
        <el-table
          border
          ref="tableRef"
          :data="tableData"
          style="width: 100%"
          :default-sort="{ prop: 'date', order: 'descending' }"
        >
          <el-table-column
            prop="freightTemplateDO.id"
            label="模板编号"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="freightTemplateDO.templateName"
            label="模板名称"
            align="center"
            width="280px"
          ></el-table-column>
          <el-table-column
            label="宝贝地址"
            align="center"
            prop="freightTemplateDO.spuLocation"
          ></el-table-column>
          <el-table-column label="发货期限" align="center">
            <template slot-scope="scope">
              {{ scope.row.freightTemplateDO.deliveryDeadline }}天
            </template>
          </el-table-column>
          <el-table-column label="默认包邮门栏" align="center">
            <template slot-scope="scope">
              <span>{{
                scope.row.freightTemplateDO.defaultFreePrice
                  | defaultFreePriceFilter
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="默认计费首次发货数量" align="center">
            <template slot-scope="scope">
              <span> {{ scope.row.freightTemplateDO.defaultFirstNum }}件</span>
            </template>
          </el-table-column>
          <el-table-column label="默认计费首次发货价格" align="center">
            <template slot-scope="scope">
              <span>
                {{
                  scope.row.freightTemplateDO.defaultFirstMoney / 100
                }}元</span
              >
            </template>
          </el-table-column>
          <el-table-column label="默认计费续件数量" align="center">
            <template slot-scope="scope">
              <span>
                {{ scope.row.freightTemplateDO.defaultContinueNum }}件</span
              >
            </template>
          </el-table-column>
          <el-table-column label="默认计费续件价格" align="center">
            <template slot-scope="scope">
              <span>
                {{
                  scope.row.freightTemplateDO.defaultContinueMoney / 100
                }}元</span
              >
            </template>
          </el-table-column>
          <el-table-column
            label="指定地区数量"
            align="center"
            prop="freightTemplateCarriageDOList.length"
          ></el-table-column>

          <el-table-column
            prop="address"
            label="操作"
            align="center"
            width="300px"
          >
            <template slot-scope="scope">
              <el-button
                class="button_redact"
                size="mini"
                @click="handleEdit(scope.row)"
                v-power="'operation:freight:update'"
                >修改</el-button
              >
              <el-button
              v-power="'operation:freight:delete'"
                class="button_remove"
                size="mini"
                type="danger"
                @click="handleDelete(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </template>
      <!--底部列表内容部分结束-->
    </div>
  </div>
</template>

<script>
import Freight from "@/api/operate/Freight";

export default {
  data() {
    return {
      radio: 2, //包邮默认值
      //弹出框
      formclone: "", //克隆的初始化第一层表单 用于清空
      priceFormClone: "", //第二层表单初始化
      tableData: [], //table里面的数据
      dialogFormVisible: false, //控制弹出框是否显示
      priceFormVisible: false, //第二层弹出框是否显示
      formLabelWidth: "120px", //弹出框宽度
      title: "创建", //弹出框标题
      bool: true, //布尔值 判断编辑还是修改 为true是创建 否则就是修改

      //输入框数值
      form: {
        templateName: "", //模板名称
        deliveryDeadline: "", //发货期限
        defaultFreePrice: 68, //默认满价包邮
        defaultFirstNum: 1, //计费首次数量
        defaultFirstMoney: 0, //计费首次价格
        defaultContinueNum: 1, //默认续件数量
        defaultContinueMoney: 0, //计费续费价格
        spuLocation: "", //宝贝地址
        freightTemplateCarriageDOList: [], //特殊运费区
        templateId: "" //管理员id
      },
      //地区数据
      designatedArea: [
        "北京市",
        "天津市",
        "河北省",
        "山西省",
        "内蒙古自治区",
        "辽宁省",
        "吉林省",
        "黑龙江省",
        "上海市",
        "江苏省",
        "浙江省",
        "安徽省",
        "福建省",
        "江西省",
        "山东省",
        "河南省",
        "湖北省",
        "湖南省",
        "广东省",
        "广西自治区",
        "海南省",
        "重庆市",
        "四川省",
        "贵州省",
        "云南省",
        "西藏自治区",
        "陕西省",
        "甘肃省",
        "青海省",
        "宁夏回族自治区",
        "新疆维吾尔自治区",
        "台湾省",
        "香港特别行政区",
        "澳门特别行政区"
      ],
      //价格输入框
      priceForm: {
        freePrice: "", //包邮门栏
        firstNum: "", //首次数量
        firstMoney: "", //首次价格
        continueNum: "", //续件数量
        continueMoney: "", //续件价格
        designatedArea: [] //选中的地区
      },
      //弹出框验证
      rules: {
        templateName: [
          { message: "模板名称不能为空", trigger: "blur", required: true }
        ],
        deliveryDeadline: [
          //发货期限
          { message: "发货期限不能为空", trigger: "blur", required: true },
          {
            pattern: /^[1-9]{1}[\d]*$/,
            message: "需要大于0",
            trigger: "blur"
          }
        ],
        //默认满价包邮
        defaultFreePrice: [
          {
            message: "默认满价包邮不能为空",
            trigger: "blur",
            required: true
          },
          { pattern: /^[0-9]*$/, message: "请输入整数", trigger: "blur" }
        ],
        //默认首费
        defaultFirstMoney: [
          {
            message: "默认首件价格不能为空",
            trigger: "blur",
            required: true
          },
          { pattern: /^[0-9]*$/, message: "请输入整数", trigger: "blur" }
        ],
        //默认首件数量
        defaultFirstNum: [
          {
            message: "默认首件数量不能为空",
            trigger: "blur",
            required: true
          },
          {
            pattern: /^[1-9]{1}[\d]*$/,
            message: "数量不得少于1件",
            trigger: "blur"
          }
        ],
        //默认续件价格
        defaultContinueMoney: [
          {
            message: "默认续件价格不能为空",
            trigger: "blur",
            required: true
          },
          { pattern: /^[0-9]*$/, message: "请输入整数", trigger: "blur" }
        ],
        //默认续件数量
        defaultContinueNum: [
          {
            message: "默认续件数量不能为空",
            trigger: "blur",
            required: true
          },
          {
            pattern: /^[1-9]{1}[\d]*$/,
            message: "数量不得少于1件",
            trigger: "blur"
          }
        ]
      },
      rulesPrice: {
        //包邮门栏
        freePrice: [
          {
            message: "包邮门栏不能为空",
            trigger: "blur",
            required: true
          },
          { pattern: /^[0-9]*$/, message: "请输入整数", trigger: "blur" }
        ],
        //首次数量
        firstNum: [
          {
            message: "首次数量不能为空",
            trigger: "blur",
            required: true
          },
          {
            pattern: /^[1-9]{1}[\d]*$/,
            message: "数量不得少于1件",
            trigger: "blur"
          }
        ], //首次价格
        firstMoney: [
          {
            message: "首次价格不能为空",
            trigger: "blur",
            required: true
          },
          { pattern: /^[0-9]*$/, message: "请输入整数", trigger: "blur" }
        ], //续件数量
        continueNum: [
          {
            message: "续件数量不能为空",
            trigger: "blur",
            required: true
          },
          {
            pattern: /^[1-9]{1}[\d]*$/,
            message: "数量不得少于1件",
            trigger: "blur"
          }
        ], //续件价格
        continueMoney: [
          {
            message: "续件价格不能为空",
            trigger: "blur",
            required: true
          },
          { pattern: /^[0-9]*$/, message: "请输入整数", trigger: "blur" }
        ], //选中的地区
        designatedArea: [
          {
            message: "至少选择一个地区",
            trigger: "change",
            required: true
          }
        ]
      }
    };
  },
  created() {
    this.gain();
    this.formclone = JSON.parse(JSON.stringify(this.form)); //将form初始状态再次赋值给form表单
    this.priceFormClone = JSON.parse(JSON.stringify(this.priceForm)); //将priceForm初始状态再次赋值给priceFormClone表单
    this.$nextTick(() => {
      //表格渲染完成之后重新布局表格
      this.$refs.tableRef.doLayout();
    });
  },
  filters: {
    //包邮
    defaultFreePriceFilter(data) {
      if (data > 0) {
        return "满" + data / 100 + "元包邮";
      } else if (data == 0) {
        return "包邮";
      } else if (data < 0.01) {
        return "不包邮";
      }
    }
  },
  methods: {
    /*第二层添加按钮*/
    priceAdd() {
      this.$nextTick(() => {
        //清除正则提示
        if (this.$refs.priceForm) {
          this.$refs.priceForm.resetFields();
        }
      });
      this.priceFormVisible = true; //显示弹出框
      this.priceForm = JSON.parse(JSON.stringify(this.priceFormClone)); //将priceForm初始状态再次赋值给priceFormClone表单 清空表单
    },
    /*第二层弹框*/
    priceForms(priceForm) {
      this.$refs[priceForm].validate(valid => {
        if (valid) {
          this.priceForm.designatedArea = this.priceForm.designatedArea + ""; //将地区转型成字符串
          this.form.freightTemplateCarriageDOList.unshift(
            //添加
            JSON.parse(JSON.stringify(this.priceForm))
          );
          this.priceFormVisible = false; //关闭弹出框
        } else {
          return false;
        }
      });
    },
    //删除地区
    priceCancel(index) {
      this.$confirm("此操作将永久删除该指定地区, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          //确定删除的话
          this.form.freightTemplateCarriageDOList.splice(index, 1); //删除内容
          this.Prosperity.Messages("删除成功", "success");
        })
        .catch(() => {
          this.Prosperity.Messages("已取消删除");
        });
    },
    /** 选择地区的事件 */
    handleCheckedCitiesChange(val) {
      this.priceForm.designatedArea = val;
    },
    //获取列表数据内容
    gain() {
      Freight.gain(this.forms).then(res => {
        this.tableData = res.data.data; //将接口列表内容赋值给列表数组
      });
    },
    //点击添加按钮触发
    add() {
      //清空输入框下面的提示（输入错误）
      this.$nextTick(() => {
        if (this.$refs.form) {
          this.$refs.form.resetFields();
        }
      });
      this.form = JSON.parse(JSON.stringify(this.formclone)); //将form初始状态再次赋值给form表单
      this.radio = 2;
      this.title = "创建"; //将标题改变
      this.bool = true; //bool为true触发添加接口
      this.dialogFormVisible = true; //显示弹出框
    },
    //添加接口
    adduser(form) {
      this.$refs[form].validate(valid => {
        if (valid) {
          this.form.defaultFreePrice = this.form.defaultFreePrice * 100;
          this.form.defaultFirstMoney = this.form.defaultFirstMoney * 100;
          this.form.defaultContinueMoney = this.form.defaultContinueMoney * 100;
          if (this.radio == 1) {
            //判断是什么包邮状态
            this.form.defaultFreePrice = 0;
            this.form.defaultContinueMoney = 0;
            this.form.defaultFirstMoney = 0;
          } else if (this.radio == 0) {
            this.form.defaultFreePrice = -1;
          }
          var _this = this;
          Freight.adduser(_this.form)
            .then(res => {
              if (res.data.errmsg == "成功") {
                this.gain();
                _this.Prosperity.Messages("创建运费模板成功", "success");
                this.dialogFormVisible = false;
              } else {
                _this.Prosperity.Messages(res.data.errmsg, "error");
              }
            })
            .catch(err => {
              return err;
            });
        } else {
          return false;
        }
      });
    },
    //点击修改按钮触发
    handleEdit(row) {
      //清空输入框下面的提示（输入错误）
      for (const key in this.form) {
        //获取到数据在点击进去时赋值入输入框
        this.form[key] = row.freightTemplateDO[key];
      }
      this.form.freightTemplateCarriageDOList =
        row.freightTemplateCarriageDOList; //将添加的内容赋值给表格
      this.form.templateId = row.freightTemplateDO.id;
      this.form.defaultFreePrice = row.freightTemplateDO.defaultFreePrice / 100;
      this.form.defaultContinueMoney =
        row.freightTemplateDO.defaultContinueMoney / 100;
      this.form.defaultFirstMoney =
        row.freightTemplateDO.defaultFirstMoney / 100;
      this.form.defaultFreePrice > 0
        ? (this.radio = 2)
        : this.form.defaultFreePrice == 0
        ? (this.radio = 1)
        : (this.radio = 0);
      this.bool = false; //改变bool 触发编辑接口
      this.title = "编辑"; //改变弹出框标题
      this.dialogFormVisible = true; //显示弹出框
    },

    //编辑接口
    compile(form) {
      this.$refs[form].validate(valid => {
        if (valid) {
          this.form.defaultFreePrice = this.form.defaultFreePrice * 100; //对数据进行处理
          this.form.defaultFirstMoney = this.form.defaultFirstMoney * 100;
          this.form.defaultContinueMoney = this.form.defaultContinueMoney * 100;
          if (this.radio == 1) {
            //判断状态
            this.form.defaultFreePrice = 0;
            this.form.defaultContinueMoney = 0;
            this.form.defaultFirstMoney = 0;
          } else if (this.radio == 0) {
            this.form.defaultFreePrice = -1;
          }
          var _this = this;
          Freight.compile(_this.form).then(res => {
            if (res.data.errmsg == "成功") {
              this.gain();
              _this.Prosperity.Messages("修改运费模板成功", "success");
              _this.dialogFormVisible = false;
            } else {
              _this.Prosperity.Messages(res.data.errmsg, "error");
            }
          });
        } else {
          return false;
        }
      });
    },
    //搜索信息
    seek() {
      this.forms.pageNo = 1; //在最后一页搜索时回到第一页
      this.gain();
    },
    //最外层的删除
    handleDelete(row) {
      this.form.templateId = row.freightTemplateDO.id; //当前删除的id
      this.$confirm(
        "此操作将永久删除该运费模板---" +
          row.freightTemplateDO.templateName +
          "---, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      )
        .then(() => {
          //确定删除的话
          this.cancel();
        })
        .catch(() => {
          this.Prosperity.Messages("已取消删除");
        });
    },
    //删除接口
    cancel() {
      var _this = this;
      Freight.cancel(_this.form)
        .then(res => {
          if (res.data.errmsg == "成功") {
            _this.gain(); //重新渲染
            this.Prosperity.Messages("删除成功", "success");
          } else {
            _this.Prosperity.Messages(res.data.errmsg, "error");
          }
        })
        .catch(err => {
          return err;
        });
    }
  }
};
</script>

<style scoped="scoped">
/*最大父盒子开始*/
#system_admin {
  padding: 20px;
  margin-bottom: 40px;
}
/*最大父盒子结束*/

/*顶部index框开始*/
.role_seek > .el-input {
  width: 200px !important;
  height: 40px !important;
}
.role_seek > .el-input > .el-input__inner {
  font-size: inherit;
  width: 50% !important;
  height: 100% !important;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
}
.role_input .el-input__suffix {
  left: 170px !important;
}
/*顶部index框结束*/

/*顶部按钮开始*/
.role_seek > .el-button--primary {
  line-height: 1px;
  font-size: 14px;
  border: 1px solid #409eff !important;
  background: #409eff !important;
  color: #fff;
  vertical-align: middle;
  padding: 12px 20px;
  margin-left: 5px;
}
/*顶部按钮结束*/

/*底部列表内容*/

.el-table {
  margin-top: 15px;
  font-size: 12px;
}
.cell {
  text-align: center;
  font-size: 12px;
  padding: 0px 10px;
}
.el-table__row > td {
  padding: 8px 0px;
}
.button_redact {
  background: #409eff !important;
  color: #fff !important;
  border: 1px solid #409eff;
}
/*编辑内容按钮*/
.button_redact:hover {
  background: #66b1ff !important;
  border: 1px solid #66b1ff;
}
.button_remove {
  background: #f56c6c !important;
  color: #fff !important;
  border: #f56c6c 1px solid;
}
.button_remove:hover {
  background: #f78989 !important;
  border: 1px solid #f78989;
}
.el-table--scrollable-x .el-table__body-wrapper {
  overflow-x: hidden;
}
/*底部列表内容*/

/*底部分页*/
.block {
  margin: 55px 0px;
}

/*底部分页结束*/

/*添加弹出框*/
.pop_first {
  margin-left: 65px;
}
.el-form-item__label {
  text-align: left;
  margin-left: 50px;
  width: 85px !important;
}
.el-input__inner {
  text-indent: 5px;
}
.el-form
  .el-input
  .pop-up
  > .el-form-item
  > .el-form-item__content
  > .el-input
  > .el-input__inner {
  width: 268px !important;
  height: 38px;
  padding: 15px 0px;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
}

.pop-up > .el-form-item > .el-form-item__content > .el-form-item__error {
  left: 0px !important;
}
/*添加弹出框结束*/
.el-select .el-input__inner {
  border: 1px solid #dcdfe6;
}
.el-select__caret {
  position: absolute;
  right: 58px !important;
}
.rolelds .el-input__suffix > i {
  position: absolute;
  right: 24px;
}
.el-input {
  width: 30%;
}
</style>
